<template>
  <div class="profile-page">

    <div class="user-info">
      <div class="container">
        <div class="row">

          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="author.image"
                 class="user-img" />
            <h4> {{ author.username }} </h4>
            <p>
              {{ author.bio }}
            </p>
            <!-- TODO: 个人设置跳转 -->
            <nuxt-link class="btn btn-sm btn-outline-secondary action-btn"
                       v-if="user.username === author.username"
                       to="/settings">
              <i class="ion-plus-round"></i>
              &nbsp;
              Settings
            </nuxt-link>
          </div>

        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">

        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <nuxt-link class="nav-link"
                           :class="{
                             active: tab === 'mine'
                           }"
                           exact
                           :to="{
                             name: 'profile',
                             params: {
                               username: author.username
                             }
                           }">
                  {{ user.username === author.username ? 'My' : author.username }} Articles
                </nuxt-link>
              </li>
              <li class="nav-item">
                <nuxt-link class="nav-link"
                           :class="{
                             active: tab === 'favorited'
                           }"
                           v-if="user.username === author.username"
                           exact
                           :to="{
                             name: 'profile',
                             params: {
                               username: author.username
                             },
                             query: {
                               tab: 'favorited'
                             }
                           }">
                  Favorited Articles
                </nuxt-link>
              </li>
            </ul>
          </div>

          <article-preview v-for="article in articles"
                           :key="article.slug"
                           :data="article"
                           :isAuthor="user.username === article.author.username"
                           @favorite="favoriteHandle"></article-preview>

          <nav-page :totalPage="totalPage"
                    :selected="page"
                    :tab="tab"></nav-page>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getAuthor } from '@/api/user'
import {
  getArticles
} from '@/api/article'
import articlePreview from '@/components/articlePreview'
import navPage from '@/components/navPage'

export default {
  name: 'Profile',
  components: {
    articlePreview,
    navPage
  },
  watchQuery: ['tab', 'page'],
  head() {
    return {
      title: `${this.author.username}`,
      meta: [
        {
          hid: 'profile',
          name: 'profile',
          content: 'user profile'
        }
      ]
    }
  },
  async asyncData({ store, params, query, redirect }) {
    let limit = 20
    let {
      page = 1,
      tab = 'mine',
    } = query
    // 获取作者信息
    let {
      data: {
        profile: author
      }
    } = await getAuthor(params.username)
    if (store.state.user.username !== author.username && tab !== 'mine') {
      redirect({
        name: 'profile',
        params: {
          username: author.username
        }
      })
    }
    // 获取与作者相关的文章
    // 如果是本人，则可以显示收藏的文章
    const {
      data: {
        articlesCount,
        articles
      }
    } = await getArticles({
      author: tab === 'mine' ? author.username : '',
      offset: (page - 1) * limit,
      limit,
      favorited: tab === 'favorited' ? author.username : ''
    })
    let totalPage = Math.ceil(articlesCount / limit)
    // console.log(author)
    return {
      author,
      totalPage,
      articles,
      page,
      tab
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    async favoriteHandle(data) {
      data.favoriteDisable = true
      if (data.favorited) {
        // 已赞，取消赞
        let result = await unfavoriteArticle(data.slug)
        console.log(result)
        data.favorited = false
        data.favoritesCount -= 1
      } else {
        // 点赞
        await favoriteArticle(data.slug)
        data.favorited = true
        data.favoritesCount += 1
      }
      data.favoriteDisable = false
      console.log(data)
    }
  }
}
</script>

<style>
</style>